import { reactive, Ref, ref } from "vue";

export function useTable(reqAPI: any, reqParams: any) {
  const tableData: Ref<IListModal[]> = ref([]);
  // 分页参数
  const paginationParams = reactive({
    currentPage: 1, //页码数
    pageSize: 5, //显示的数量
    total: 1, //总条数
  });
  // 封装函数请求
  const qreuseList = async () => {
    let res = await reqAPI({
      pageNum: paginationParams.currentPage,
      pageSize: paginationParams.pageSize,
      ...reqParams, //结构
    });
    tableData.value = res.data.list;
    paginationParams.total = res.data.total; //总条数
  };
  qreuseList();

  //  点击分页方法后  重新调用一次请求 将新的参数currentPage、pageSize 拿去请求
  const handleSizeChange = (val: number) => {
    console.log("SizeChange", val);
    qreuseList();
  };
  const handleCurrentChange = (val: number) => {
    console.log("CurrentChange", val);
    qreuseList();
  };
  return {
    qreuseList,
    tableData,
    paginationParams,
    handleSizeChange,
    handleCurrentChange,
  };
}
